<template>
  <div class="app-container">
    <el-form
      class="dialog-form"
      :rules="rules"
      ref="dataForm"
      :model="temp"
      label-position="left"
      label-width="120px"
    >
    
      <el-form-item label="广告名称" prop="subjectName">
        <el-input v-model="temp.subjectName" maxlength="50"  placeholder="广告名称" style="width:300px;"></el-input>
      </el-form-item>

      <el-form-item label="链接" prop="url">
        <el-input v-model="temp.url" placeholder="链接" style="width:300px;"></el-input>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="temp.sort" placeholder="排序"></el-input-number>
      </el-form-item>

      <el-form-item label="类型" prop="type">
        <el-select v-model="temp.type" placeholder="请选择">
          <el-option
            v-for="(item,value) in typeFilter"
            :key="value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发布状态" prop="status">
        <el-radio-group v-model="temp.status">
          <el-radio
            v-for="(item,value) in statusFilter"
            :key="value"
            :label="value"
            :value="value"
          >{{item}}</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="图片" prop="coverImg">
        <el-upload
          class="avatar-uploader"
          :action="UPLOAD_URL"
          :show-file-list="false"
          :on-success="handleAvatarSuccess('coverImg')"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="temp.coverImg" :src="temp.coverImg|absUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取消</el-button>
      <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
    </div>
  </div>
</template>
<style scoped>
.avatar-uploader {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar {
  width: 375px;
  height: 155px;
}

.avatar-uploader >>> .avatar-uploader-icon {
  width: 375px;
  height: 155px;
}
.img-src {
  height: 100px;
}
</style>

<script>
let statusFilter = ["上线", "下线"];
let statustagFilter = ["success", "danger", "info", "warning"];

let adPositionFilter = [
  "首页底部",
  "首页顶部",
  "特价专区",
  "限时抢购（封面）",
  "限时抢购（活动页）"
];
let adPositiontagFilter = ["success", "danger", "info", "warning"];

export default {
  data() {
    return {
      tableHeight: 400,
      total: 0,
      list: [],
      typeFilter: [
        {
          label: 'App轮播banner',
          value: 0
        },
        {
          label: '微信轮播banner',
          value: 1
        },
        {
          label: '首页banner',
          value: 2
        }
      ],
      temp: {
        subjectName: "",
        url: "",
        type: "",
        sort: "",
        status: "",
        coverImg:
          "https://images2018.cnblogs.com/blog/675289/201808/675289-20180823104931687-1990575380.png"
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      statusFilter: statusFilter,
      cityIdOptions: [],
      adPositionFilter: adPositionFilter,
     rules: {
        subjectName: [
          {
            required: true,
            message: "广告名称不能为空",
            trigger: "change"
          }
        ],
        sort: [
          {
            required: true,
            message: "排序不能为空",
            trigger: "change"
          }
        ],
        url: [
          {
            required: true,
            message: "链接不能为空",
            trigger: "change"
          }
        ],
        type: [
          {
            required: true,
            message: "类型不能为空",
            trigger: "change"
          }
        ],
        status: [
          {
            required: true,
            message: "请选中发布状态",
            trigger: "change"
          }
        ],
        coverImg: [
          {
            required: true,
            message: "请上传图片",
            trigger: "change"
          }
        ],
      }
    };
  },
  created() {
    this.loadData();
    this.tableHeight = window.innerHeight - 300;
  },
  filters: {
    statusFilter(status) {
      return statusFilter[parseInt(status)];
    },
    statustagFilter(status) {
      return statustagFilter[parseInt(status)];
    }
  },
  methods: {
    submitFormAction() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.submiting = true;
          const postData = Object.assign({}, this.temp);
          let url = "/admin/cms_subject/add";
          if (this.isEditing) {
            url = "/admin/cms_subject/add";
          }
          this.$post(url, postData)
            .then(data => {
              this.loadData();
              this.$$notify("操作成功");
              this.dialogFormVisible = false;
              this.temp = {};
            })
            .finally(_ => {
              this.submiting = false;
            });
        }
      });
    },
    loadData() {
      this.$post("/admin/cms_subject/list", this.params)
        .then(data => {
          this.list = data.dataList;
        })
        .catch(_ => {
          console.log("Err", _);
        });
    }
  }
};
</script>
